<template>
  <div class="search">
    <van-search
      v-model="model"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @clear="onCancel"
      @focus="onFocus"
    >
      <span v-if="isFocus" slot="left-icon" @click.stop="onCancel">X</span>
    </van-search>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isFocus: false,
      model: ""
    };
  },
  computed: {},
  props: {
    value: {}
  },
  watch: {
    value(newValue) {
      this.model = newValue;
    }
  },
  methods: {
    onSearch() {
      this.$store.commit("addHistory", this.model);
      this.model = "";
    },
    onFocus() {
      this.isFocus = true;
      this.$emit("focus");
    },
    onCancel() {
      this.isFocus = false;
      this.$emit("cancel");
    }
  },
  components: {},
  mounted() {}
};
</script>
<style lang="less">
.search {
}
</style>